<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 条件渲染 v-if 和 v-show -->

<!-- 
区别：
    v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

    v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

    相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

    总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。
 -->

<body>
    <div id="app">

        <!-- v-if 条件渲染 -->
        <h3>v-if 条件渲染</h3>
        <div v-if="awesome">Vue is awesome!</div>
        <div v-else>Oh no 😢</div>
        <button @click="awesome = !awesome">toggle</button>

        <!-- v-else-if 条件渲染 -->
        <h3>v-else-if 条件渲染</h3>
        <div v-if="type === 'A'"> A </div>
        <div v-else-if="type === 'B'"> B </div>
        <div v-else-if="type === 'C'"> C </div>
        <div v-else> Not A/B/C </div>
        
        <!-- v-show 条件渲染 -->
        <h3>v-show 条件渲染</h3>
        <div v-show="awesome"> v-show 展示</div>
        <div v-show="!awesome"> v-show 隐藏展示 </div>

    </div>
    <script src="js/vue.js"></script>

    <script>
        const HelloVue = {
            data() {
                return {
                    awesome: true,
                    type: ''
                }
            },
            computed: {

            },
            methods: {

            }
        };

        const app = Vue.createApp(HelloVue).mount("#app");
    </script>
</body>

</html>